<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <script src="../dist/plugin-html-button-response.js"></script>
    <script src="../dist/plugin-image-button-response.js"></script>
    <script src="../dist/plugin-audio-button-response.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    // all preload files will print information to the console about file loading success/failure
    // through the on_error and on_success trial parameters
    // automatically preload all stimuli files based on the timeline 
    var auto_preload_trial = {
      type: jsPsychPreload,
      auto_preload: true,
      on_error: function(file) {
        console.log('Error: ',file);
      },
      on_success: function(file) {
        console.log('Loaded: ',file);
      }
    };

    var start = {
      type: jsPsychHtmlButtonResponse,
      stimulus: '<p>The previous trial was an automatic preload trial.</p>'+
        '<p>This trial loaded all stimuli files that can be automatically preloaded<br>based on the main jsPsych experiment timeline.</p>'+
        '<p>In this example experiment, there are two trials in which the stimuli can be automatically preloaded.</p>'+
        '<p>The stimuli for these trials have finished loading.</p>',
      choices: ['Next']
    };

    var image_trial = {
      type: jsPsychImageButtonResponse,
      stimulus: 'img/happy_face_1.jpg',
      choices: ['Happy', 'Sad'],
      stimulus_width: 400
    };

    var audio_trial = {
      type: jsPsychAudioButtonResponse,
      stimulus: ['sound/speech_green.mp3'],
      choices: ['Continue']
    };

    var start_fail_example_1 = {
      type: jsPsychHtmlButtonResponse,
      stimulus: '<p>The next trial is a manual preload trial.</p>'+
        '<p>Manual preloading allows you to load specific files, for instance if you want to load files in batches,<br>'+
        'or if the stimuli cannot be automatically preloaded (because you are using timeline variables or dynamic parameters).</p>'+
        '<p>In the next preload example, the files in the <i>images</i> array do not exist, so the preload will fail.</p>'+
        '<p>The <i>continue_after_error</i> parameter is set to <i>true</i>, so the experiment will continue despite the preload failure.</p>',
      choices: ['Next']
    };

    // manually preload specific files
    // continue with the experiment even if one or more files fails to load
    var preload_fail_example_1 = {
      type: jsPsychPreload,
      images: ['BAD_IMAGE_NAME_1','BAD_IMAGE_NAME_2','BAD_IMAGE_NAME_3'],
      audio: ['sound/speech_green.mp3','sound/speech_red.mp3'],  
      message: '<p>Please wait while the files load.</p>',
      continue_after_error: true,
      max_load_time: 4000,
      on_error: function(file) {
        console.log('Error: ',file);
      },
      on_success: function(file) {
        console.log('Loaded: ',file);
      }
    };

    var after_fail_example_1 = {
      type: jsPsychHtmlButtonResponse,
      stimulus: function() {
        var message;
        // if continue_after_error is true in your preload trial, then you can check the trial
        // data to see if preloading was successful
        var preload_trial_data = jsPsych.data.getLastTrialData().values()[0];
        if (preload_trial_data.success) {
          message = '<p>All files loaded successfully!</p>';
        } else {
          message = '<p>There was a problem loading one or more files.</p>'+
            '<p>The files that failed to load are listed in the data for the previous trial.</p>';
        }
        return message;
      },
      choices: ['Next']
    };

    var start_fail_example_2 = {
      type: jsPsychHtmlButtonResponse,
      stimulus: '<p>The next trial is another manual preload trial.</p>'+
        '<p>It has been set up with bad file names, so it will also fail.</p>'+
        '<p>This time the <i>continue_after_error</i> parameter is set to <i>false</i>, so the experiment will stop with an error message.</p>'+
        '<p>The next trial will also show details about the errors (<i>show_detailed_errors: true</i>).</p>',
      choices: ['Next']
    };

    // manually preload specific files 
    // if loading fails, then stop with a detailed error message
    var preload_fail_example_2 = {
      type: jsPsychPreload,
      images: ['img/happy_face_2.jpg','img/happy_face_3.jpg','img/sad_face_1.jpg','img/sad_face_2.jpg','img/sad_face_3.jpg','img/sad_face_4.jpg',
      'img/1.gif','img/2.gif','img/3.gif','img/4.gif','img/5.gif','img/6.gif','img/7.gif','img/8.gif','img/9.gif','img/10.gif','img/11.gif','img/12.gif',
      'BAD_IMAGE_NAME'],
      audio: ['BAD_AUDIO_NAME'],
      video: ['video/sample_video.mp4', 'BAD_VIDEO_NAME'], // videos will not be preloaded if HTML file is running locally (i.e. safe mode)
      message: '<p>Please wait...</p>',
      show_detailed_errors: true,
      max_load_time: null,
      post_trial_gap: 1000,
      on_error: function(file) {
        console.log('Error: ',file);
      },
      on_success: function(file) {
        console.log('Loaded: ',file);
      }
    };

    var after_fail_example_2 = {
      type: jsPsychHtmlButtonResponse,
      stimulus: '<p>All files loaded successfully!</p>',
      choices: ['End']
    };

    jsPsych.run([auto_preload_trial, start, image_trial, audio_trial,
      start_fail_example_1, preload_fail_example_1, after_fail_example_1, 
      start_fail_example_2, preload_fail_example_2, after_fail_example_2]);

  </script>
</html>
